@extends('admin.common.main')
@section('cnt')
    <head>
        <link href="/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
        <meta charset="utf-8">
        <title>文章列表</title>
    </head>
    <body>
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-4">
            <ol class="breadcrumb">
                <li>
                    <a href="index.html">主页</a>
                </li>
                <li>
                    <strong>文章管理</strong>
                </li>
            </ol>
        </div>
    </div>

    {{-- 消息提示 --}}
    @include('admin.common.msg')

    <div class="page-container">
        <div class="form-group">
            <form class="form-inline" method="get" onsubmit="return dopost()">
                <input type="text" class="form-control" id="starttime" autocomplete="off"
                       placeholder="开始日期">~
                <input type="text" class="form-control" id="endtime" autocomplete="off"
                       placeholder="结束日期">
                <input type="text" placeholder="请输入关键词" id="title" class="form-control">
                <button type="submit" class="btn btn-primary"> 搜索文章</button>
            </form>
        </div>
        <div class="mt-20">
            <div style="margin-bottom: 10px">
                <a class="btn btn-danger radius" onclick="deleteAll()">
                    <i class="Hui-iconfont">&#xe6e2;</i> 批量删除
                </a>
                <a class="btn btn-primary radius" href="{{route('admin.article.create')}}">
                    <i class="Hui-iconfont">&#xe600;</i> 添加文章
                </a>
            </div>
            <table class="table table-hover table-striped" id="myTable">
                <thead>
                <tr class="text-c">
                    {{--<th width="25"><input type="checkbox" name="" value=""></th>--}}
                    <th width="80">ID</th>
                    <th>文章标题</th>
                    <th>发布时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
    @section('js')
        <script type="text/javascript" src="{{env('APP_URL')}}admin/lib/layer/2.4/layer.js"></script>
        <script type="text/javascript" src="{{env('APP_URL')}}admin/lib/My97DatePicker/4.8/WdatePicker.js"></script>
        <script type="text/javascript"
                src="{{env('APP_URL')}}admin/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="{{env('APP_URL')}}admin/lib/laypage/1.2/laypage.js"></script>
        <script src="/js/moment-with-locales.min.js"></script>
        <script src="/js/bootstrap-datetimepicker.min.js"></script>
        <script>
            $('#starttime').datetimepicker({locale: 'zh-cn', format: 'YYYY-MM-DD HH:mm:ss',});
            $('#endtime').datetimepicker({locale: 'zh-cn', format: 'YYYY-MM-DD HH:mm:ss'});
            var dataTable = $('#myTable').DataTable({
                //分页数量
                lengthMenu: [5, 10, 15, 20, 50],
                //隐藏搜索
                searching: false,
                // order: [[1, "asc/desc"], [3, "asc/desc"]],
                columnDefs: [
                    //第三列不进行排序
                    {targets: [1, 3], orderable: false}
                ],
                //开启服务端分页 开启ajax
                serverSide: true,
                ajax: {
                    url: "{{route('admin.article.index')}}",
                    type: 'get',
                    data: function (res) {
                        res.title = $.trim($('#title').val());
                        res.starttime = $.trim($('#starttime').val());
                        res.endtime = $.trim($('#endtime').val());
                    }
                },
                columns: [
                    {data: 'id', className: 'text-c'},
                    {data: 'title', className: 'text-c'},
                    {data: 'created_at', className: 'text-c'},
                    {data: 'action', className: 'text-c', defaultContent: '默认值'}
                ]
            });

            function dopost() {
                dataTable.ajax.reload();
                return false;
            }
            async function del(evt, obj) {
                evt.preventDefault();
                // 请求的URL地址
                let url = $(obj).attr('href');
                // 发起ajax
                // 原生的，浏览自带
                let ret = await fetch(url, {
                    method: 'delete',
                    headers: {
                        'X-CSRF-TOKEN': '{{csrf_token()}}'
                    }
                });
                let json = await ret.json();
                if (json.code == 200){
                    layer.msg(json.msg);
                }else{
                    layer.msg(json.msg);
                }
                setTimeout(function () {
                    window.location.reload();
                },800);
                // 取消默认行为
                return false;
            }
        </script>
    @endsection
    </body>
    </html>